import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export default class App extends Component {
	state = {
		count: 0,
		list: [ 1, 2, 3 ],
		person: {
			name: 'jack',
			age: 18
		}
	}
	changeCount = () => {
		// this.state.count++
		// // 不要上面的写法，即便通过下面的操作也能做到更新视图
		// this.setState({
		// 	count: this.state.count
		// })

		this.setState({
			count: this.state.count + 1
		})
	}
	changeList = () => {
		// this.state.list.push('Hello React')
		this.setState({
			list: [ ...this.state.list, 'Hellow' ]
		})
	}
	changePerson = () => {
		// this.state.person.name = 'ifer'
		// this.state.person.age = 19
		this.setState({
			person: {
				...this.state.person,
				name: '曾星',
				age: 80
			}
		})
	}
	render() {
		return (
			<div>
				<h3>count</h3>
				<p>{this.state.count}</p>
				<button onClick={this.changeCount}>click</button>
				<hr />
				<h3>list</h3>
				<ul>{this.state.list.map((item, index) => <li key={index}>{item}</li>)}</ul>
				<button onClick={this.changeList}>click</button>
				<hr />
				<h3>person</h3>
				<p>
					{this.state.person.name} {this.state.person.age}
				</p>
				<button onClick={this.changePerson}>click</button>
			</div>
		)
	}
}

ReactDOM.render(<App />, document.querySelector('#root'))
